Day 15 View

第 12 屆 iThome 鐵人賽

DAY 15

Modern Web

12th鐵人賽

1363 瀏覽

本篇重點

MVC - View
viewdata & viewbag & viewModel
view component *
Action Reuslt & view engine *

今天的重點是MVC的View部分
會先討論基本View的內容
後面再整理一下生命週期裡到View的流程

前面幾篇有提到View就是前端的頁面顯示
通常不會有複雜的邏輯
從controller傳出去的物件直接顯示出來就好
在ASP .NET Core裡所使用得是Razor語法,View資料夾下面的的都是.cshtml的檔案,透過 .NET 編譯過後會轉成瀏覽器可以看得懂的HTML

實際執行專案會依照controller的名稱去抓取對應的View下面的.cshtml

HomeController.cs

實際在執行時
會先去找Views下面對應的資料夾,找到和action相同的.cshtml
Shared資料夾下是放共用的view,或是partial view

如果找不到對應資料夾下的程式
則會往Shared下去找

剛剛有提到view 是由.cshtml所組成的
會經由編譯後轉成HTML
在View裡面是可以寫C#程式的
只要將

view 除了透過action傳入一個物件當作model使用
也可以透過Viewdata和viewbag的以及tempdata的方式去操作
因為這部分並不是 .NET Core的新功能這裡就先帶過
詳細的介紹可以看看前幾屆寫的文章

ViewModel 也是在 .NET MVC就有的產物
主要是在解決一個View只能處理一個Model的問題
這邊有一些需要注意及特性：

View component是 .NET core新加入的功能
有別於partial view 單純的把View拆開來
還加入了controller的部分,可以將少部分的邏輯做操作頁面
可以把它想成是partial view + controller的
很類似Vue Component的概念

這裡舉一個簡單的例子
假設今天有一個Movie top 3 的排行榜
需要放在View的某個地方
但他又不是View裡面主要的Model
這時候就可以使用View component去實作

新增一支View component
先建立一個叫做ViewComponent的資料夾
新增一支ＭoviesTopViewComponet.cs
並繼承ViewComponent
在InvokeAsync方法裡面的邏輯很簡單
在這裡就是new一個MoviceService,去取出已經寫好的Movies list

\ViewComponents\MoviesTopViewComponent.cs
新增View component 的View
View Component有可以重複使用的特性
因次在這邊將它放入Shared的資料夾下,並建立對應的folder名稱

\Shared\Components\MoviesTop\Default.cshtml
在View裡面引進這個Component
宣告的方式,只要在目標的view裡面引入@Component找到helper的InvokeAsync,並傳入Component的名稱,使用await是因為是async
```
@await Component.InvokeAsync("MoviesTop")
```
執行結果
可以看到下方的部分是我們剛剛新增的Component
並且是可以重複使用的